<!--# layout("/common/layout.html",{"jsBase":"/js/answer/answer/"}){ -->

<style type="text/css">
    .uploader-list {
        margin-left: -15px;
    }

    .uploader-list .info {
        position: relative;
        margin-top: -25px;
        background-color: black;
        color: white;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.5;
        width: 100px;
        height: 25px;
        text-align: center;
        display: none;
    }

    .uploader-list .handle {
        position: relative;
        background-color: black;
        color: white;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.5;
        width: 100px;
        text-align: right;
        height: 18px;
        margin-bottom: -18px;
        display: none;
    }

    .uploader-list .handle span {
        margin-right: 10px;
    }

    .uploader-list .handle span:hover {
        cursor: pointer;
    }

    .uploader-list .file-iteme {
        margin: 12px 0 0 15px;
        padding: 1px;
        float: left;
    }
</style>

<form class="layui-form layui-form-pane" id="addForm"  lay-filter="editform">
    <input type="hidden" name="answerId" id="answerId">
    <input type="hidden" name="questionId" id="questionId" value="${question.questionId}">
    <br>
    <div class="layui-row">
        <div class="layui-form-item">
            <!--<div class="layui-inline">-->
                <!--<label class="layui-form-label">问题ID</label>-->
                <!--<div class="layui-input-inline">-->
                    <!--<input type="text" name="questionId" id="questionId" autocomplete="off" maxlength="50" class="layui-input"  readonly="true" value="${question.questionId}">-->
                <!--</div>-->
            <!--</div>-->
            <div class="layui-inline">
                <label class="layui-form-label">问题标题</label>
                <div class="layui-input-inline" style="width:512px">
                    <input type="text" name="questionTitle" id="questionTitle" autocomplete="off" maxlength="50" class="layui-input" value="${question.title}" >
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-row">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">问题描述</label>
                    <div class="layui-input-block" style="width:512px">
                        <textarea name="describe" id="describe" required lay-verify="required" placeholder="请输入" class="layui-textarea" style="height: 200px;" >${question.describe}</textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
            <label class="layui-form-label">回答者</label>
				<div class="layui-input-inline">
                    <layui:simpleDataSelect name="customerId" value="" data="${customerInfoList}" lay-verify="required"
                                            attrId="customerId" attrName="customerName" layFilter="customerFilter" id="customer_author" laySearch="true" />
                    <!--<input type="text" name="customerId" id="customerId" autocomplete="off" maxlength="50" class="layui-input" >-->
				</div>
            </div>
            <div class="layui-inline">
            <label class="layui-form-label">是否推荐</label>
				<div class="layui-input-inline">
                    <input type="radio" name="isTop" value="1" title="是" >
                    <input type="radio" name="isTop" value="0" title="否" checked="">
				</div>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">回答内容</label>
                <div class="layui-input-block" style="width:512px">
                    <textarea name="answerContent"  id="answerContent" placeholder="请输入" class="layui-textarea" lay-verify="required"></textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-upload">
                <label class="layui-form-label" style="width: 120px">回答附件</label>
                <button type="button" class="layui-btn" id="test2">多图片上传</button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 650px;">
                    <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list"></div>
                </blockquote>
                <input type="hidden" name="file" id="file">
            </div>
        </div>
    </div>

    <layui:submitButtons id="addButton" />
</form>
<!--#} -->
<script>

$(document).on("mouseenter mouseleave", ".file-iteme", function(event){
    if(event.type === "mouseenter"){
        //鼠标悬浮
        $(this).children(".info").fadeIn("fast");
        $(this).children(".handle").fadeIn("fast");
    }else if(event.type === "mouseleave") {
        //鼠标离开
        $(this).children(".info").hide();
        $(this).children(".handle").hide();
    }
});
// 删除图片
$(document).on("click", ".file-iteme .handle", function(event){
    $(this).parent().remove();
    var lectureImgs ="";
    $("#uploader-list img").each(function(){
        var img = $(this).attr("src");
        if(img!=null&&img!=""){
            lectureImgs += img+"@";
        }
    });
    $("#lectureImgs").val(lectureImgs.substr(0,lectureImgs.length-1));
});

Common.initImage();

layui.extend({
    loading: '../../../plugins/layui_extends/loading/loading',
}).define([ 'form', 'laydate', 'table','loading','answerApi','upload'], function(exports) {
    var form = layui.form;
    var answerApi = layui.answerApi;
    var index = layui.index;
    var isNew = true;
    var upload = layui.upload;
    <!--# if(!(isEmpty(answerJson))){  -->
    isNew = false;
    <!--# } -->
    var view = {
        init:function(){
            Lib.initGenrealForm($("#addForm"),form);

            //多图片上传
            upload.render({
                elem: '#test2'
                ,url: '${ctxPath}/answer/answer/upload.json'
                ,multiple: true
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    // obj.preview(function(index, file, result){
                    //     $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                    //
                    // });
                }
                ,done: function(res){
                    //上传完毕
                    if(res.state=='SUCCESS'){
                        $('#uploader-list').append(
                            '<div id="" class="file-iteme">' +
                            '<div class="handle"><span class="layui-icon layui-icon-delete"></span></div>' +
                            '<img style="width: 100px;height: 100px;" src='+ res.url +'>' +
                            '</div>'
                        );

                        var file = $("#file").val();
                        if(!file){
                            file += res.url;
                        }else{
                            file += "@"+res.url;
                        }
                        $("#file").val(file);
                    }
                }
            });

            this.initSubmit();
        },
        initSubmit:function(){
            $("#addButton").click(function(){
                form.on('submit(form)', function(){
                    answerApi.saveForm(isNew,$('#addForm'),function(){
                        parent.window.dataReload();
                        Common.info("保存成功");
                        Lib.closeFrame();
                    });
                });
            });

            $("#addButton-cancel").click(function(){
                Lib.closeFrame();
            });
        }
    }
    view.init();
    <!--# if(!(isEmpty(answerJson))){  -->
    var formJson = ${answerJson};
    form.val("editform",formJson);
    <!--# } -->
});
</script>
